<template>
  <div class="header">
    <div
      v-for="(order, index) in orders"
      :key="index"
      :class="['order', orderIndex === index ? 'active' : '']"
      @click="switchOrder(index)"
    >
      {{order.text}}
      <i></i>
    </div>
    <div class="checkbox">
      <el-checkbox v-model="certification" @change="assembleParams">
        <img :src="`${$baseImgUrl}company/certification_icon.png`"/>
        <span class="text">海博认证</span>
      </el-checkbox>
    </div>
    <div class="checkbox">
      <el-checkbox v-model="guarantee" @change="assembleParams">
        <img :src="`${$baseImgUrl}company/guarantee_icon.png`"/>
        <span class="text">海博担保</span>
      </el-checkbox>
    </div>
    <!-- 首字母筛选 -->
    <div class="first-letter-filter" @click="filterWithLetter">
      首字母筛选：
      <b
        v-for="(item, index) in letterList"
        :key="item"
        :data-index="index"
        :class="{ active: index == letterIndex }"
      >
        {{item}}
      </b>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CompanyHeader',
  props: {
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      orderIndex: 0,
      orders: [
        { key: 'default', text: '默认排序' },
        { key: 'newIn', text: '最新加入' },
      ],
      certification: false,
      guarantee: false,
      letterIndex: -1
    };
  },
  created() {
    const letterList = new Array(26);
    for (let i = 0; i < 26; i += 1) {
      letterList[i] = String.fromCodePoint(i + 65);
    }
    this.letterList = letterList;
    this.assembleParams();
  },
  methods: {
    switchOrder(index) {
      this.orderIndex = index;
      this.assembleParams();
    },
    // 首字母筛选
    filterWithLetter(e) {
      if (this.loading) {
        return;
      }
      const { index } = e.target.dataset;
      if (index === this.letterIndex) {
        this.letterIndex = -1;
      } else {
        this.letterIndex = index;
      }
      this.params = {
        way: 'letter',
        letter: this.letterList[index]
      };
      this.assembleParams();
    },
    // 组装查询参数
    assembleParams() {
      if (this.loading) {
        return;
      }
      const params = {
        order: 0,
        letter: this.letterList[this.letterIndex],
        is_certification: this.certification,
        is_guarantee: this.guarantee
      };
      this.$emit('changeParams', params);
    }
  }
};
</script>

<style lang="less" scoped>
  @import '../../../less/global.less';
  .header {
    display: flex;
    margin-bottom: 10px;
    height: 40px;
    line-height: 40px;
    border: 1px solid #ddd;
    color: #333;
    background-color: #fff;
    .order {
      flex: 0 0 90px;
      height: 100%;
      text-align: center;
      cursor: pointer;
      &.active {
        color: #fff;
        background-color: @mainBgColor;
      }
    }
    .checkbox {
      margin-left: 20px;
      img {
        vertical-align: middle;
      }
      .text {
        padding-left: 5px;
      }
    }
    .first-letter-filter {
      padding-right: 20px;
      flex: 1;
      text-align: right;
      b {
        padding: 0 2px 0 4px;
        color: red;
        cursor: pointer;
        text-align: center;
        &.active {
          background-color: red;
          color: #fff;
        }
      }
    }
  }
</style>
